<script setup>
    import { ref, onMounted } from 'vue'
    import { getArticleList, getArticleDetail } from '@/api/article.js'

    const loadingStatus = ref(true)
    const tableData = ref([])
    const total = ref(0)

    onMounted (async () => {
        try {
            const res = await getArticleList()
            if(res.code === 200) {
                tableData.value = res.data
                total.value = res.total
                loadingStatus.value = false
            }
        } catch (error) {
            console.log(error)
        }
    })
</script>

<template>
    <div>
        <el-table :data="tableData" v-loading="loadingStatus" style="width: 100%">
            <el-table-column prop="id" label="id" width="180" />
            <el-table-column prop="title" label="标题" width="180" />
            <el-table-column prop="content" label="内容" />
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" />
    </div>
</template>

<style scoped>

</style>